{% extends "base.html" %}
{% load navigation_tags %}
{% load display_tags %}
{% load authorization_tags %}

{% block content %}
    {{ block.super }}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <h3 class="has-filters">
                        {{ view }} Engagements
                        <div class="dropdown pull-right">
                            &nbsp;
                            <button class="btn btn-primary dropdown-toggle" type="button" id="downloadMenu"
                                    data-toggle="dropdown" aria-expanded="true" aria-label="download">
                                <span class="fa-solid fa-download"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="downloadMenu">
                            <li role="presentation">
                                <a id="csv_export" href="{% url 'engagement_csv_export' %}?url={{ request.get_full_path }}">
                                    <i class="fa-solid fa-table"></i> CSV Export
                                </a>
                            </li>
                            <li role="presentation">
                                <a id="excel_export" href="{% url 'engagement_excel_export' %}?url={{ request.get_full_path }}">
                                    <i class="fa-solid fa-file-excel"></i> Excel Export
                                </a>
                            </li>
                            </ul>
                            <button id="show-filters" aria-label="Filters" data-toggle="collapse" data-target="#the-filters" class="btn btn-primary toggle-filters"> <i class="fa-solid fa-filter"></i> <i class="caret"></i> </button>
                        </div>
                    </h3>
                </div>
                <div id="the-filters" class="is-filters panel-body collapse {% if filter_form.has_changed %}in{% endif %}">
                    {% include "dojo/filter_snippet.html" with form=filter_form %}
                </div>
            </div>
            {% if engagements %}

                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=engagements page_size=True %}
                </div>

                <div class="table-responsive panel panel-default">
                    <table id="engagements"
                           class="tablesorter-bootstrap table table-condensed table-striped table-hover">
                        <tr>
                            <th></th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th>{% dojo_sort request 'Engagement' 'name' 'asc' %}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th>{% dojo_sort request 'Period' 'target_start' 'asc' %}</th>
                            <th>Status</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="prod_name">{% dojo_sort request labels.ASSET_LABEL 'product__name' 'asc' %}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="prod_name">{% dojo_sort request labels.ORG_LABEL 'product__prod_type__name' %}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th>{% dojo_sort request 'Lead' 'lead__first_name' %}</th>
                            <th>Tests</th>
                            {% if system_settings.enable_jira %}
                                <th>Jira</th>
                            {% endif %}
                        </tr>

                        {% for e in engagements %}
                            <tr>
                                <td class="nowrap">
                                    <div class="align-top">
                                        <div class="dropdown">
                                            <a href="#" aria-label="More engagement options" class="dropdown-toggle pull-left" data-toggle="dropdown" id="dropdownMenuToggle" role="button">&nbsp;<i class="fa-solid fa-ellipsis-vertical"></i>&nbsp;</a>
                                            <ul aria-labelledby="dropdownMenuToggle" class="dropdown-menu" role="menu">
                                                <li role="presentation">
                                                    <a class="" href="{% url 'view_engagement' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-rectangle-list"></i> View
                                                </li>
                                                {% if e|has_object_permission:"Engagement_Edit" %}
                                                <li role="presentation">
                                                    <a class="" href="{% url 'edit_engagement' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-pen-to-square"></i> Edit
                                                    </a>
                                                </li>
                                                <li class="divider" role="separator"></li>
                                                {% endif %}
                                                {% if e|has_object_permission:"Test_Add" %}
                                                <li role="presentation">
                                                    <a class="" href="{% url 'add_tests' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-plus"></i> Add Tests
                                                    </a>
                                                </li>
                                                {% endif %}
                                                {% if e|has_object_permission:"Import_Scan_Result" %}
                                                <li role="presentation">
                                                    <a class="" href="{% url 'import_scan_results' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-upload"></i> Import Scan Results
                                                    </a>
                                                </li>
                                                {% endif %}
                                                <li class="divider" role="separator"></li>
                                                <li role="presentation">
                                                    <a href="{% url 'engagement_open_findings' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-file-lines"></i> View Active Findings
                                                    </a>
                                                </li>
                                                <li role="presentation">
                                                    <a href="{% url 'engagement_verified_findings' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-file-lines"></i> View Active and Verified Findings
                                                    </a>
                                                </li>
                                                <li role="presentation">
                                                    <a href="{% url 'engagement_closed_findings' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-file-lines"></i> View Mitigated Findings
                                                    </a>
                                                </li>
                                                <li role="presentation">
                                                    <a href="{% url 'engagement_accepted_findings' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-file-lines"></i> View Accepted Findings
                                                    </a>
                                                </li>
                                                <li role="presentation">
                                                    <a href="{% url 'engagement_all_findings' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-file-lines"></i> View All Findings
                                                    </a>
                                                </li>
                                                <li class="divider" role="separator"></li>
                                                <li role="presentation">
                                                    <a href="{% url 'engagement_report' e.id %}?title=&active=1&verified=1&false_p=2&duplicate=2" role="menuitem">
                                                        <i class="fa-solid fa-file-lines"></i> Engagement Report
                                                    </a>
                                                </li>
                                                {% if e|has_object_permission:"Engagement_Delete" %}
                                                <li class="divider" role="separator"></li>
                                                <li role="presentation">
                                                    <a class="text-danger" href="{% url 'delete_engagement' e.id %}" role="menuitem">
                                                        <i class="fa-solid fa-trash"></i> Delete Engagement
                                                    </a>
                                                </li>
                                                {% endif %}
                                            </ul>
                                            </li>
                                            </ul>
                                </td>
                                <td style="white-space: normal">
                                    <a class="eng_link" href="{%url 'view_engagement' e.id %}">{% if e.name %}{{ e.name }}{% endif %}</a>
                                    <div>
                                        {% include "dojo/snippets/tags.html" with tags=e.tags.all %}
                                    </div>
                                </td>
                                <td> {{ e.target_start }} - {{ e.target_end }}
                                     {% if e.is_overdue and e.status != 'Completed' %}
                                        <span class="tag-label warning-color">
                                             {{ e.target_end|overdue }} overdue
                                         </span>
                                      {% endif %}
                                </td>
                                <td>{{ e.status }}</td>
                                <td class="prod_name">
                                    <a href="{% url 'view_product' e.product.id %}">
                                        {{ e.product.name }}
                                    </a>
                                    {{ e.product|jira_project_tag }}
                                    {% include "dojo/snippets/tags.html" with tags=e.product.tags.all %}
                                </td>
                                <td class="prod_name">
                                    <a href="{% url 'product_type_metrics' e.product.prod_type.id %}">
                                        {{ e.product.prod_type.name }}
                                    </a>
                                </td>
                                <td>{{ e.lead.first_name }} {{ e.lead.last_name }}</td>
                                <td>
                                    <a class="eng_link" href="{%url 'view_engagement' e.id %}#tests">
                                        {{ e.test_count|default:0 }}
                                    </a>
                                </td>
                                {% if system_settings.enable_jira %}
                                    <td>
                                        {{ e|jira_project_tag }}
                                    </td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=engagements page_size=True %}
                </div>
            {% else %}
                <div id="no_engagements"><h5 class="text-center"> No active engagements </h5></div>
            {% endif %}
        </div>
    </div>

{% endblock %}
{% block postscript %}
    {{ block.super }}
    <script>
        $(function() {
            $('.table-responsive').on('shown.bs.dropdown', function(e) {
                var t = $(this),
                m = $(e.target).find('.dropdown-menu'),
                tb = t.offset().top + t.height(),
                mb = m.offset().top + m.outerHeight(true),
                d = 20; // Space for shadow + scrollbar.   
            if (t[0].scrollWidth > t.innerWidth()) {
                if (mb + d > tb) {
                    t.css('padding-bottom', ((mb + d) - tb));
                }
            } else {
                t.css('overflow', 'visible');
            }
            }).on('hidden.bs.dropdown', function() {
                $(this).css({
                    'padding-bottom': '',
                    'overflow': ''
                });
            });
        });
    </script>
    <script>
        $(function () {
            var prodWords = [
                {% for word in product_name_words %}
                    "{{word}}",
                {% endfor %}
            ];
            var engWords = [
                {% for word in engagement_name_words %}
                    "{{word}}",
                {% endfor %}
            ];
            $("#id_product__name").autocomplete({
                source: prodWords
            });
            $("#id_name").autocomplete({
                source: engWords
            });
        });
    </script>
    {% include "dojo/filter_js_snippet.html" %}
{% endblock %}
